<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="artist.wechat"
      name="艺人微信号"
      label="艺人微信号"
      placeholder="请填写艺人微信号"
      maxlength="50"
      :rules="[{ required: true }]"
    />
    <!-- {
          pattern: /^[a-zA-Z]([-_a-zA-Z0-9]{5,49})+$/,
          message: '*无效微信号',
          trigger: 'onSubmit',
        }, -->
    <van-field
      v-model="artist.mobile"
      name="艺人手机号"
      label="艺人手机号"
      placeholder="请填写艺人手机号"
      maxlength="11"
      type="digit"
      :rules="[
        { required: true, trigger: 'onChange' },
        {
          pattern: /^\d{11}$/,
          trigger: 'onSubmit',
          message: '*请填写11位手机号码',
        },
      ]"
    />
    <van-field
      v-model="artist.star_scout_name"
      readonly
      clickable
      name="星探"
      label="星探"
      placeholder="请选择星探"
      :rules="[{ required: true }]"
      @click="
        () => {
          $router.push({ path: '/select_personnel', query: { type: 0 } });
        }
      "
    >
      <template #right-icon>
        <img class="icon" :src="require('@/assets/field_right_icon.png')" />
      </template>
    </van-field>

    <van-field
      v-model="artist.agent_name"
      readonly
      clickable
      name="经纪人"
      label="经纪人"
      placeholder="请选择经纪人"
      :rules="[{ required: true }]"
      @click="
        () => {
          $router.push({ path: '/select_personnel', query: { type: 1 } });
        }
      "
    >
      <template #right-icon>
        <img class="icon" :src="require('@/assets/field_right_icon.png')" />
      </template>
    </van-field>

    <van-field
      v-model="artist.remarks"
      name="个人简介"
      label="个人简介"
      type="textarea"
      autosize
      rows="2"
      placeholder="请填写个人简介"
      maxlength="300"
      show-word-limit
    />
    <!-- :rules="[{ required: true }]" -->
    <div class="sub_btn_box">
      <van-button class="btn" plain hairline type="info" native-type="submit"
        >提交</van-button
      >
    </div>
  </van-form>
</template>

<script>
import { mapGetters } from "vuex";
import { updateArtist, addArtist } from "@/axios/artist";
import { Toast } from "vant";
export default {
  computed: { ...mapGetters(["artist", "getReview_id"]) },
  data() {
    return {
      updateArtist,
      addArtist,
    };
  },
  methods: {
    onSubmit() {
      Toast.loading({
        duration: 0,
        message: "提交中...",
        overlay: true,
      });
      this[this.artist.artist_id ? "updateArtist" : "addArtist"]({
        ...this.artist,
        uid: this.getReview_id,
      })
        .then((res) => {
          console.log(res);
          // Toast.success(this.artist.artist_id?'添加陈宫':'艺人信息已修改');
          Toast.success("提交成功，等待客服审核");
          this.$router.push({
            path: "/artist",
            query: {
              ...this.$route.query,
              type: this.artist.artist_id ? "examine_list" : "list",
            },
          });
        })
        .catch((err) => {
          Toast.clear();
          Toast.fail(err);
        });
    },
  },
};
</script>

<style scoped>
@import "./css/input.css";
@import "../css/index.css";
.icon {
  width: 15px;
  height: 15px;
}
</style>